<template>
	<view class="uni-column">
		<Navbar :leftClick="toHome" :showLeft="true" title="章节练习"></Navbar>
		<uv-sticky bgColor="#fff" class="mid">
			<uv-tabs :active-style="activeStyle" 
			:list="tabs" 
			key-name="bankName"
			@click="click" 
			:inactiveStyle="inactiveStyle" 
			itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" 
			lineWidth="30">
			</uv-tabs>
		</uv-sticky>
		<Swipper :parent-id="parentId"></Swipper>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import Swipper from './Swipper.vue'
	import {
		ref,
		reactive,
		getCurrentInstance,
		nextTick,
		computed
	} from "vue"
	const {
		proxy
	} = getCurrentInstance();
	const tabs = ref([])
	const index = ref(0)
	const parentId = ref();
	const activeStyle = {
		color: '#303133',
		fontWeight: 'bold',
		transform: 'scale(1.05)'
	}
	const inactiveStyle = {
		color: '#606266',
		transform: 'scale(1)'
	}
	const click = (item) => {
		parentId.value = item.bankId
	}
	const toHome = () => {
		uni.switchTab({
			url: '../Index'
		})
	}
	const loadTab = async () => {
		let result = await proxy.Request({
			url: proxy.Api.loadTabs,
			showLoading: false,
		});
		if (!result) {
			return;
		}
		tabs.value = result.data;
	};
	onLoad(() => {
		console.log("mounted钩子函数启动")
		loadTab()
	})
</script>

<style lang="scss" scoped>
	.mid {
		padding: 7px;
		margin-bottom: 10px;
	}

	.uni-column {
		background-color: aliceblue;
	}
</style>